<template>
  <div id="Tabbar">
    <ul>
        <li v-for="(item,index) in tabBars" @click="switchView(item)">
            {{item.title}}
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    data(){       
        return{
            tabBars:[
                {title:'书架', path:'/BookShelf'},
                {title:'书城', path:'/Home'},
                {title:'我的', path:'/MyBooks'}
            ]
        }
    },
    methods:{
        switchView(item){
            //切换路由
            this.$router.push(item.path);
        }
    }
}

</script>

<style lang="scss" scoped>
    #Tabbar{
        width:100%;
        height:64px;
        background:	#00AA00;
        position:fixed;
        bottom:0;
        color: #fff;
        font-size: 20px;
        z-index: 10001;
        ul{
            width:100%;
            height:100%;
            display:flex;
            flex-direction:row;
            li{
                flex:1;
                display:flex;
                justify-content:center;
                align-items:center;
            }
        }
    }
</style>

    
